<template>
	<u-popup :show="visible" closeable="true" :safeAreaInsetBottom="false" round="10" @close="$emit('cancel')">
		<view class="pl-30 pr-30 pt-90">
			<view class="flex">
				<image class="width-160 height-160 shrink0" :src="productData.image"></image>
				<view class="flex justify-between flex-column ml-20 w-100">
					<view class="fweigh-600 fsize-34">{{ productData.name }}</view>
					<view class="flex justify-between">
						<view class="line-red">
							<text class="fsize-26">￥</text>
							<text class="fsize-36 fweigh-600">{{ productData.activityPrice|| unitPrice }}</text>
							<text v-if="productData.FUnitName" class="ml-10 fsize-30 line-gray">/ {{ productData.FUnitName }}</text>
						</view>
						<actions :number="productData.number" @add="add" @minus="minus"></actions>
					</view>
				</view>
			</view>
			<view class="fsize-24 line-gray mt-40 line-height-28 fweight-500">{{ productData.description || '' }}</view>
			<!-- 商品规格start -->
			<scroll-view scroll-y class="scroll-view">
				<view class="materials" v-for="(material, index) in productData.materials" :key="index">
					<view class="group-name" v-if="material.values.length > 0">{{ material.group_name }}</view>
					<view class="values" v-if="material.values.length > 0">
						<view class="value" :class="{selected: value.is_selected}" @tap="changeMaterialSelected(index, key)"
							v-for="(value, key) in material.values" :key="key">
							{{ value.fName }}
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottom">
				<view class="add-cart-btn" @tap="addToCart">
					<!-- <text style="margin-right: 10rpx;">
						<text class="fsize-20">原价￥</text>
						<text class="fsize-24">{{getPrice}}</text>
					</text>  style="color: #ed4d4f;"-->
					<text>
						<text class="fsize-24">{{productData.activityPrice? '加购价': '会员价'}}￥</text>
						<text>{{getPrice}}</text>
					</text>
					<text class="ml-10">加入购车</text>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {mapState} from 'vuex'
	import Actions from '../actions/actions.vue'
	export default {
		name: 'ProductPopup',
		components: {
			Actions
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			product: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				productData: {},
			}
		},
		watch: {
			product(val) {
				// 转换数据
				this.productData = JSON.parse(JSON.stringify(val)) // 父传子数据，当前商品数据
				if(this.productData.number) return
				this.$set(this.productData, 'number', 1) // 当前商品动态添加数量		
				}
		},
		computed: {
			...mapState(['userInfo']),
			// 商品单价
			unitPrice() {
				if (this.userInfo.id && this.productData.vipPrice !== 0) { // 判断有无会员
					return this.productData.vipPrice
					
				} else {
					return this.productData.price
				}
				// if (!this.productData.vipPrice) {
				// 	// 没有会员价
				// 	if (this.productData.materials) {
				// 		const list = this.productData.materials[0].values
				// 		// 在 JSON 数据中查找 is_selected 属性为 true 的对象
				// 		const selectedValue = list.find(value => value.is_selected);
				// 		return selectedValue.fPosPrice
				// 	} else {
				// 		return this.productData.price
				// 	}
				// } else {
				// 	// 有会员价
				// 	if (this.productData.materials) {
				// 		const list = this.productData.materials[0].values
				// 		// 在 JSON 数据中查找 is_selected 属性为 true 的对象
				// 		const selectedValue = list.find(value => value.is_selected);
				// 		return selectedValue.vipPrice
				// 	} else {
				// 		return this.productData.vipPrice
				// 	}
				// }
				},
				// 单个商品的总价
				getPrice() {
						const data = this.productData
						if(this.productData.activityPrice) {
							// 如果有加购价
							if (data.materials) {
								const selectedItems = []; // 用于存储选中的项
								for (const group of data.materials) {
									for (const value of group.values) {
										if (value.is_selected ) {
											selectedItems.push(value.fPosPrice);
										}
									}
								}
								selectedItems.splice(0,1)
								const price = selectedItems.reduce((total, itemPrice) => total + itemPrice,0) + data.activityPrice
								return (price * data.number).toFixed(2)
							} else {
									// 有会员没规格start
								return (data.activityPrice * data.number).toFixed(2)
							}
						}
					// console.log(data);
						if(this.userInfo.id) {
							// 有会员价
							if (data.materials) {
								const selectedItems = []; // 用于存储选中的项
								// const externalPrice = data.FPosPrice; // 外部的 price
								for (const group of data.materials) {
									for (const value of group.values) {
										if (value.is_selected) {
											if(value.vipPrice !== 0 ) { // 有优惠
											selectedItems.push(value.vipPrice);
											} else {
												selectedItems.push(value.fPosPrice);
											}
										}
									}
								}
								// 将选中项的价格与外部 price 相加
								// const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, externalPrice);
								
								const price = selectedItems.reduce((total, itemPrice) => total + itemPrice,0);
								return (price * data.number).toFixed(2)
							} else {
									// 有会员没规格start
								if(data.vipPrice) {
								return (data.vipPrice * data.number).toFixed(2)
								} else {
									return (data.price * data.number).toFixed(2)
								}
								// 有会员没规格end
							}
						} else {
							// 没优惠
							if (data.materials) {
								const selectedItems = []; // 用于存储选中的项
								// const externalPrice = data.FPosPrice; // 外部的 price
								for (const group of data.materials) {
									for (const value of group.values) {
										if (value.is_selected) {
												selectedItems.push(value.fPosPrice);
										}
									}
								}
								// 将选中项的价格与外部 price 相加
								// const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, externalPrice);
								const price = selectedItems.reduce((total, itemPrice) => total + itemPrice,0);
								return (price * data.number).toFixed(2)
							} else {
								// if(data.vipPrice) {
								// 	return (data.vipPrice * data.number).toFixed(2)
								// } else {
									return (data.price * data.number).toFixed(2)
								// }
							}
						}
					},
				
				// getPrice() {
				// 		if (data.price && data.materials) {
				// 			const selectedItems = []; // 用于存储选中的项
				// 			// const externalPrice = data.FPosPrice; // 外部的 price
				// 			for (const group of data.materials) {
				// 				for (const value of group.values) {
				// 					if (value.is_selected) {
				// 						selectedItems.push(value.fPosPrice);
				// 					}
				// 				}
				// 			}
				// 			// 将选中项的价格与外部 price 相加
				// 			// const price = selectedItems.reduce((total, itemPrice) => total + itemPrice, externalPrice);
				// 			const price = selectedItems.reduce((total, itemPrice) => total + itemPrice);
				// 			return (price * data.number).toFixed(2)
				// 		} else {
				// 			return (data.price * data.number).toFixed(2)
				// 		}
				// 	},
					getProductSelectedMaterials() {
						if (!this.productData.is_single && this.productData.materials) {
							let materials = []
							this.productData.materials.forEach(({
								values
							}) => {
								values.forEach(value => {
									if (value.is_selected) {
										materials.push(value.FName)
									}
								})
							})
							return materials.length ? materials.join('，') : ''
						}
						return ''
					}
			},
			methods: {
				changeMaterialSelected(index, key) {
					const currentMaterial = this.productData.materials[index].values[key] //materials每一项规格中的其中一个规格
					// 判断单选还是多选
					if (currentMaterial.selectType === 1) return
					if (!currentMaterial.is_exclusive) {
						if (currentMaterial.is_selected) return
						this.productData.materials[index].values.forEach(value => this.$set(value, 'is_selected', 0))
						currentMaterial.is_selected = 1
						if (index === 0) {
							this.productData.FFoodSpecID = currentMaterial.fItemID
						}
					} else {
						currentMaterial.is_selected = !currentMaterial.is_selected
						// if(index === 1){
						// 	this.productData.feed_ids = this.productData.materials[1].values.filter(im => im.is_selected).map(jm => jm.fItemID)
						// }else if(index === 2){
						// 	this.productData.tast_ids = this.productData.materials[2].values.filter(im => im.is_selected).map(jm => jm.fItemID)
						// }
					}
				},
				add() {
					this.productData.number += 1
				},
				minus() {
					if (this.productData.number == 1) {
						return
					}
					this.productData.number -= 1
				},
				addToCart() {
					if (this.productData.materials) {
						this.productData.feed_ids = this.productData.materials[1].values.filter(im => im.is_selected).map(jm => jm
							.fItemID)
						this.productData.tast_ids = this.productData.materials[2].values.filter(im => im.is_selected).map(jm => jm
							.fItemID)
					}
					const product = {
						...this.productData,
					}
					// console.log(this.productData);
					this.$emit('add-to-cart', product)
				}
			}
		}
</script>

<style lang="scss" scoped>
	.popup-cancel {
		padding: 20rpx;
		display: flex;
		justify-content: flex-end;
		opacity: 0.2;
	}

	.scroll-view {
		display: flex;
		flex-direction: column;
		font-size: 24rpx;
		color: #777;
		border-top: 1px #EDEDED solid;
		padding-top: 40rpx;
		margin-top: 40rpx;
		min-height: 1vh;
		max-height: calc(100vh - 100rpx - 426rpx - 250rpx);

		.materials {
			margin-bottom: 20rpx;

			.group-name {
				padding: 10rpx 0;
			}

			.values {
				display: flex;
				flex-wrap: wrap;
				overflow: hidden;

				.value {
					background-color: #f5f5f7;
					color: 26rpx;
					padding: 10rpx 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 12rpx;

					&.selected {
						background-color: #E0A32D;
						color: #fff;
					}
				}
			}
		}
	}

	.bottom {
		padding: 0 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
		position: relative;
		z-index: 11;

		.add-cart-btn {
			height: 90rpx;
			line-height: 90rpx;
			margin-top: 20rpx;
			font-size: 30rpx;
			text-align: center;
			font-weight: bold;
			color: #111111;
			background: linear-gradient(34deg, #F3C45D, #EDAC2F);
			border-radius: 45rpx;
		}
	}
</style>